<!-- navbar -->
<nav id="nav" class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/?appId=<%= appId %>"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <% if(typeof(selectedKey) !== 'undefined' && 'home' === selectedKey) { %>
        <li class="active"><a href="/?appId=<%= appId %>"></i><span>主页</span></a></li>
        <% } else { %>
        <li><a href="/?appId=<%= appId %>"></i><span>主页</span></a></li>
        <% } %>
        <%
        if (typeof(navs) !== 'undefined') {
        navs.forEach(function(item) {
        %>
        <% if (typeof(selectedKey) !== 'undefined' && item.key === selectedKey) { %>
        <li class="active">
          <a href="<%= apiPrefix.page %>/<%- item.href %>"><span><%- item.value %></span></a>
        </li>
        <% } else { %>
        <li><a href="<%= apiPrefix.page %>/<%- item.href %>"><span><%- item.value %></span></a></li>
        <% } %>
        <% })} %>
        <% if (current_user){ %>

        <% } %>
      </ul>
      <% if (current_user) { %>
      <ul class="nav navbar-nav navbar-right nav-user">
        <li>
          <a href='<%= apiPrefix.page %>/user/messages?appId=<%= appId %>'>
            <i class='fa fa-bell' v-bind:class="{'message-fa': count > 0}"></i>{{ count }}
          </a>
        </li>
        <% if(current_user.isAdmin || current_user.isSupport) { %>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            CMS
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="<%= apiPrefix.page %>/cms/index?appId=<%= appId %>"><i class="fa fa-book fa-fw"></i> 文章管理</a></li>
            <% if(current_user.isAdmin) { %>
            <li><a href="<%= apiPrefix.page %>/cms/menu?appId=<%= appId %>"><i class="fa fa-align-justify fa-fw"></i> 菜单管理</a></li>
            <li><a href="<%= apiPrefix.page %>/cms/user?appId=<%= appId %>"><i class="fa fa-user fa-fw"></i> 用户管理</a></li>
            <li><a href="<%= apiPrefix.page %>/cms/profile?appId=<%= appId %>"><i class="fa fa-cog fa-fw"></i> 配置管理</a></li>
            <li><a href="<%= apiPrefix.page %>/cms/audio?appId=<%= appId %>"><i class="fa fa-file-audio-o fa-fw"></i> 音频管理</a></li>
            <li><a href="<%= apiPrefix.page %>/cms/static?appId=<%= appId %>"><i class="fa fa-file-word-o fa-fw"></i> 静态文件管理</a></li>
            <li><a href="<%= apiPrefix.page %>/cms/repo/config?appId=<%= appId %>"><i class="fa fa-file-word-o fa-fw"></i> GITHUB WIKI配置 </a></li>
            <li><a href="<%= apiPrefix.page %>/cms/script?appId=<%= appId %>">script</a></li>
            <% } %>
          </ul>
        </li>
        <% } %>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <% if(current_user.avatar) {%>
            <img class="media-object avatar-24" src="<%= current_user.avatar%>">
            <% } else { %>
            <%= current_user.loginname %>
            <% } %>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href='<%= apiPrefix.page %>/user/setting/show?appId=<%= appId %>'>个人资料设置</a></li>
            <li><a href='<%= apiPrefix.page %>/user/resetPassword?appId=<%= appId %>'>修改密码</a><li>
            <li role="separator" class="divider"></li>
            <li><a href='<%= apiPrefix.page %>/user/<%= current_user.loginname %>/collectTopics?appId=<%= appId %>'>我的收藏</a><li>
            <li><a href='<%= apiPrefix.page %>/user/<%= current_user.loginname %>/topics?appId=<%= appId %>'>我的文章</a></li>
            <li role="separator" class="divider"></li>
            <li><a v-on:click="signout" rel="nofollow">退出</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <%
            if (typeof(navs) !== 'undefined') {
            navs.forEach(function(item) {
            %>
            <li><a href="<%= apiPrefix.page %>/zone/<%= item.key %>/<%= item.template %>/topic/create?zoneId=<%- item._id%>&appId=<%= appId %>"><%= item.createText %></a></li>
            <% })} %>
          </ul>
        </li>
      </ul>
      <% } else { %>
      <ul class="nav navbar-nav navbar-right">
        <li><a href='<%= apiPrefix.page %>/signin?appId=<%= appId %>'>登录</a></li>
        <li><a href='<%= apiPrefix.page %>/signup?appId=<%= appId %>'>注册</a></li>
      </ul>
      <% } %>
    </div>
  </div>
</nav>
<script type="text/javascript">
  var appId = $('[name=app-id]').val();
  function nav() {
    var dataPrefix = '<%= apiPrefix.data %>';
    var pagePrefix = '<%= apiPrefix.page %>';
    var userId = '<%= typeof(current_user) !== 'undefined' && current_user ? current_user._id : "" %>'

    var vue = new Vue({
      el: '#nav',
      data: {
        count: 0
      },
      methods: {
        getMessageCount() {
          $.post(dataPrefix + '/message/unread/count', {appId: appId}, function(result) {
            if (result.err) {
              return;
            }

            vue.count = result.count;
          })
        },
        signout() {
          $.post(dataPrefix + '/user/signout', {appId: appId}, function(result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              location.href =  pagePrefix + '/?appId=' + appId;
            }
          })
        }
      }
    })

    if (userId) {
      vue.getMessageCount()
    }
  }

  nav()

</script>
